import Vue from 'vue';
// 引入路由器
import VueRouter from 'vue-router';
// 引入路由模块
import routes from './route';

/* 
路由懒加载 通过import加载模块 分模块进行单独打包 首次运行时速度加快
代码分割（code split)

vue单页面应用（spa） 懒加载 运用webpack打包 打包过后的文件非常大 进入首页 由于内容过多 卡  白屏 即使使用了loading加载 也不利于用户体验，使用懒加载 可以将页面划分 可以缓解首页加载的压力


*/


// 声明使用vue插件

Vue.use(VueRouter);

const router = new VueRouter({
    // http://localhost:9000/#/personalpage
    // hash(哈希模式)

    // mode:"hash",

    // http://localhost:9000/catepage
    mode:"history",
    // 注册路由
    routes
})
// 添加动态路由
router.addRoute({
    path:'/viptwo',
    name:'viptwo',
    component:()=>import('../views/VipTwo.vue')
})
// 全局守卫
// 全局前置守卫和全局后置守卫
/* router.beforeEach((to,from,next)=>{
    // http://localhost:9000/  起始位置 null
    // 重定向
    // http://localhost:9000/homepage  目标位置 homepage
    console.log(to);//目标路由
    console.log(from);//起始路由
    console.log(next);
    next();//放行
})
 */
/* 
需求：
如果是会员可以进入分类和购物车 首页 个人中心等等 会员都能去
如果不是会员 游客 只可以进入 首页 个人中心 充值页面（vip）


paths存放路径 数组  []  游客能进入的路径首页 个人中心 充值页面（vip）

用户 
是会员 去哪里都放行 next()  1
是游客 只有to.path在paths里面 放行  不是跳转到vip(充值去) 0

to.path是否在paths里面
paths  []  元素 字符串
to.path 字符串
在一个全是字符串的数组中查找符合条件的字符串
includes find filter  indexof
使用上述四种方法查找
















*/
// 路由 前置守卫 

// router.beforeEacth((to,from,next)=>{})
let paths = ['/homepage','/personalpage','/vip','/viptwo'];
let user = {
    name:'lele',
    flagVip: 0 //游客
}
router.beforeEach((to,from,next)=>{
    console.log(to);
    console.log(from);
    console.log(next);
    // console.log(user.flagVip);
    // 是游客还是会员
    if(user.flagVip == 0){
        // 游客
        if(paths.indexOf(to.path) >= 0){
            next();
        }else{
            // next('/vip')
            next('/viptwo');
        }

    }else{
        // 会员
        next();
    }
})

// 全局后置守卫
router.afterEach((to,from)=>{
    console.log(to);
    to.meta.name='hanhan呢？'
    console.log(from);
})




export default router